<template>
  <div class="contain-body rybs-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form"
               inline
               :model="form"
               label-width="75px">
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">姓名：</div>
          <el-input v-model="form.xm"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">身份证号：</div>
          <el-input v-model="form.zjhm"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">性别：</div>
          <el-input v-model="form.xbdm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="onSubmit">搜索</el-button>

          <el-button icon="el-icon-delete"
                     class="button-delete"
                     @click="doclear">清空</el-button>
          <!-- <el-form-item> -->

        </el-form-item>

        <!-- </el-form-item> -->
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
      </div>
      <CustomTable :columns="columns"
                   :total="total"
                   :page-sizes="[100, 200, 300, 400]"
                   :table-data="tableData"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
        <div slot="options"
             slot-scope="scope">
          <!-- <el-button type="info"
                     @click="openOptions"
                     style="margin-left: 0px;"
                     class="button-blur">详情</el-button> -->
          <el-button type="info"
                     @click="openOptions(scope)"
                     icon="el-icon-info">详情</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog width="819px"
               center
               class="custom-dialog-fill font-table"
               title="活动审批"
               :visible.sync="dialog.open">

      <div class="dialog-title"
           slot="title">
        {{ dialog.title }}
      </div>

      <div class="review-dialog-container font-table pos-r">
        <div class="review-dialog-container-picture d-f jc-c">
          <img src=""
               alt="">
        </div>
        <div class="review-dialog-container-info d-f jc-between">
          <div class="review-dialog-container-block">
            <div class="d-f"
                 v-for="(reviewItem,reviewLeftIndex) in reviewLeft">
              <div v-if="reviewItem.short"
                   class="review-dialog-container-block-label-short">
                {{reviewItem.label}}
              </div>
              <div v-if="reviewItem.long"
                   class="review-dialog-container-block-label-long">
                {{reviewItem.label}}
              </div>
              <div class="review-dialog-container-block-text">
                {{reviewItem.text}}
              </div>
            </div>
          </div>
          <div class="review-dialog-container-block">
            <div class="d-f"
                 v-for="(reviewItem,reviewLeftIndex) in reviewRight">
              <div v-if="reviewItem.short"
                   class="review-dialog-container-block-label-short">
                {{reviewItem.label}}
              </div>
              <div v-if="reviewItem.long"
                   class="review-dialog-container-block-label-long">
                {{reviewItem.label}}
              </div>
              <div class="review-dialog-container-block-text">
                {{reviewItem.text}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../../components/Title";
import CustomTable from "../../../components/CustomTable";

export default {
  name: "Rybs",
  components: { Title, CustomTable },
  data () {
    return {
      total: 0,
      reviewLeft: [
        {
          short: true,
          label: '姓名',
          text: '张三'
        },
        {
          short: true,
          label: '性别',
          text: '男'
        },
        {
          short: true,
          label: '国籍',
          text: '中国'
        },
        {
          short: true,
          label: '住址',
          text: '河南开封市雁塔区证开大道51号花园小区'
        },
        {
          long: true,
          label: '是否前科人员',
          text: '否'
        },
        {
          long: true,
          label: '是否非访问人员',
          text: '否'
        },
        {
          long: true,
          label: '是否吸毒人员',
          text: '否'
        },
      ],
      reviewRight: [
        {
          short: true,
          label: '曾用名',
          text: '张小三'
        },
        {
          short: true,
          label: '身份证',
          text: '430726198908139020'
        },
        {
          short: true,
          label: '民族',
          text: '汉族'
        },
        {
          short: true,
          label: '电话',
          text: '17392001002'
        },
        {
          long: true,
          label: '是否动员',
          text: '否'
        },
        {
          long: true,
          label: '是否涉及恐吓人员',
          text: '否'
        },
        {
          long: true,
          label: '是否变性',
          text: '否'
        },
      ],
      dialog: {
        title: '备审信息',
        open: false,
        type: 'details',//'edit','add','details'
      },
      form: {
        name: '',
        idCard: '',
        gender: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
      ],
      columns: [
        {
          key: 'xm',
          label: '姓名'
        },
        {
          key: 'zjhm',
          width: '180px',
          label: '身份证号'
        },
        {
          key: 'gjdm',
          label: '国籍'
        },
        {
          key: 'mzdm',
          label: '民族'
        },
        {
          key: 'xbdm',
          label: '性别'
        },
        {
          key: 'zy',
          label: '职业'
        },
        {
          key: 'dzmc',
          label: '地址名称'
        },
        {
          key: 'scsj',
          label: '审查时间'
        },

        {
          key: 'options',
          label: '操作',
          width: '90px',
          slot: true
        }
      ],
    }
  },
  mounted () {
    // console.log(CustomTable)
    // console.log(CustomTable.components.Pagination.props.page.default)
    // console.log(CustomTable.components.Pagination.paginationChange)
    this.getList();
  },
  methods: {

    // handleSizeChange () {
    //   CustomTable.methods.handleSelectionChange(1);
    // },
    // handleCurrentChange () {
    //   CustomTable.methods.handleCurrentChange(1);
    // },
    onSubmit () {
      this.getList();
    },
    openOptions (scope) {
      this.dialog.open = true
      this.getDetail(scope.data.zjhm);
    },
    getDetail (zjhm) {
      this.axios.post('/dxhd-rybs/getById', {
        zjhm: zjhm || 4588988
      }).then((res) => {
        this.reviewLeft[0].text = res.data.xm
        this.reviewLeft[1].text = res.data.xbdm
        this.reviewLeft[2].text = res.data.gjdm
        this.reviewLeft[3].text = res.data.dzmc
        this.reviewLeft[4].text = res.data.sfqkry
        this.reviewLeft[5].text = res.data.sfffry
        this.reviewLeft[6].text = res.data.sfxdry

        this.reviewRight[0].text = res.data.cym
        this.reviewRight[1].text = res.data.zjhm
        this.reviewRight[2].text = res.data.mzdm
        this.reviewRight[3].text = res.data.yddh
        this.reviewRight[4].text = '否'
        this.reviewRight[5].text = res.data.sfskry
        this.reviewRight[6].text = '否'

      }).catch((error) => {
      });
    },
    doclear () {
      this.form.xm = ''
      this.form.zjhm = ''
      this.form.xbdm = ''
      this.getList();
    },
    getList () {
      this.axios.post('/dxhd-rybs/selectPage', {
        current: 1,
        size: 10,
        entity: {
          xm: this.form.xm || '',
          zjhm: this.form.zjhm || '',
          xbdm: this.form.xbdm || ''
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
      });
    }
  }

}
</script>

<style scoped lang="scss">
.rybs-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

  .review-dialog-container {
    padding: 23px 45px 23px 45px;

    .review-dialog-container-picture {
      img {
        width: 122px;
        height: 140px;
        background-size: cover;
        background-image: url(../../../assets/imgs/revie_picture.png);
      }
    }

    .review-dialog-container-info {
      margin-top: 11px;

      .review-dialog-container-block {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 34px;
        width: 336px;

        .review-dialog-container-block-label-short {
          width: 56px;
          background: #f4f4f4;
          border: 1px solid #d2d2d2;
          color: #727272;
          padding-left: 7px;
          height: 34px;
        }

        .review-dialog-container-block-label-long {
          width: 122px;
          background: #f4f4f4;
          border: 1px solid #d2d2d2;
          color: #727272;
          padding-left: 7px;
          height: 34px;
        }

        .review-dialog-container-block-text {
          flex: auto;
          border: 1px solid #d2d2d2;
          color: #00206b;
          padding-left: 14px;
          height: 34px;
        }
      }
    }
  }
}
</style>


